<template>
  <div class="vs-land-type">
    <VsModuleTitle name="用地类型" />
    <div class="vs-land-type__content">
      <div class="land-pie">
        <img src="~@/assets/images/visual-screen/land-back.png" alt="" />
        <div class="land-pie-text">
          <div class="land-pie-text__title">用地总数</div>
          <div class="land-pie-text__sum">1548</div>
          <div class="land-pie-text__unit">亩</div>
        </div>
      </div>
      <ECharts :options="option" class="land-type-charts" autoresize />
      <div class="land-types">
        <div
          class="land-types__item"
          v-for="(item, index) in dataLands"
          :key="index + '-'"
        >
          <i :style="{ background: color[index] }"></i>
          <label>{{ item.label }}</label>
          <span>{{ item.count }}</span>
          <span>{{ item.pge }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VsModuleTitle from "../ModuleTitle/index";
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";

export default {
  name: "VsLandType",
  components: { VsModuleTitle, ECharts },
  filters: {},
  props: {},
  data() {
    return {
      dataLands: [
        { count: 1048, pge: 67.7, label: "耕地" },
        { count: 251, pge: 16.21, label: "林地" },
        { count: 249, pge: 16.08, label: "其他" }
      ],
      color: ["#0261E9", "#C1E61A", "#4AEAFF"],
      option: {
        color: ["#0261E9", "#C1E61A", "#4AEAFF"],
        series: [
          {
            name: "用地类型",
            type: "pie",
            radius: ["70%", "85%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "14",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "耕地" },
              { value: 251, name: "林地" },
              { value: 249, name: "其他" } //1548
            ]
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {}
};
</script>

<style lang="less">
.vs-land-type {
  margin-top: 20px;
  height: 280px;
  &__content {
    height: 244px;
    background-color: rgba(12, 26, 58, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    .land-type-charts {
      width: 190px;
      height: 190px;
    }
    .land-types {
      width: 40%;
      &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box;
        padding: 20px 6px 2px 6px;
        position: relative;
        > i {
          width: 7px;
          height: 7px;
          transform: rotate(45deg);
        }
        > label {
          display: inline-block;
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
        }
        > span {
          display: inline-block;
          font-family: antonio;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
        }
      }
    }
    .land-pie {
      position: absolute;
      left: 73px;
      .land-pie-text {
        position: absolute;
        top: 8px;
        text-align: center;
        width: 90px;
        &__title,
        &__unit {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
          letter-spacing: 0;
          text-align: center;
        }
        &__title {
          font-family: PingFangSC-Semibold;
        }
        &__sum {
          font-family: "04b09" !important;
          font-size: 26px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>
